<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">add</button>

    <script>
        function foo() {
            var el = document.getElementById('btn')
            // 此处有外部引用  此处变量无法被回收  即内存泄漏
            el.onclick = function () {
                console.log(el.id)
            }
        }

        foo()


        // 优化上述代码
        function foo() {
            // 此处DOM节点引用了两次
            var el = document.getElementById('btn')
            // 此处有外部引用  此处变量无法被回收  即内存泄漏
            el.onclick = function () {
                console.log(el.id)
            }
             
            // 元素清除后 代码引用消失 则会被回收
            el = null
        }

        foo()
    </script>
</body>
</html>